/**
 * zhx.multiCTC style sass
 * Author : Vicco Wang
 * Date : 05/02/2017
 */

@import "zhx.multi.ctc.base";

//fixed custom scroll bar css for ui-sortable
.mCustomScrollBox, .mCSB_container{
  overflow:inherit;
}

textarea, input, button, a {
  outline: none;

  &:focus,&:active{
    outline: none;
  }

}

#zhx-multi-ctc-wrapper{
  @include use-flex;
  @include flex-column;
  height:100%;
  position:relative;
  font-size:12px;
  background-color:#fff;
  @include no-select;

  #zhx-multi-ctc-controller{
    height:30px;
    flex:none;
    background-color:lighten( $base-gray-color, 30% );
    border-bottom:2px solid darken( $base-gray-color, 0% );
    @include use-flex;

    ul{
      flex:1;
      @include use-flex;

      &.bus-icon{

        &:before{
          content : '图示';
          @include use-flex;
          @include flex-align-center;
          padding:0 5px;
          background-color: darken( $base-gray-color, 5% );
          color :#fff;
        }

        li{
          @include use-flex;
          @include flex-align-center;
          padding: 0 5px 0 8px;

          span{
            @include use-flex;

            &:first-child{
              width:12px;height:12px;
              border-radius:12px;
              box-sizing:border-box;
              margin-right:5px;

              &.icon-normal{
                background-color: #fff;
                border:3px solid $dark-blue-color;
              }

              &.icon-stationing{
                background-color: $base-blue-color;
                //border:3px solid $dark-blue-color;
              }

              &.icon-fullLoad{
                background-color: $base-purple-color;
                border:none;
              }

              &.icon-alarm{
                background-color: $base-red-color;
                border:none;
              }

              &.icon-speeding{
                background-color: $base-yellow-color;
                border:none;
              }

            }

          }

        }

      }

      &.bus-ctrl{

        align-items: center;
        justify-content : flex-end;

        li{
          @include use-flex;
          @include flex-align-center;
          color:#fff;
          padding:0 15px;
          height:100%;
          background : lighten( $base-gray-color, 5% );
          border-right:1px solid darken( $base-gray-color, 10% );

          &:last-child{
            border-right:none;
          }
        }
      }
    }
  }

  #zhx-multi-ctc-section-wrapper{
    @include use-flex;
    flex-direction: row;
    flex:1;
    overflow: hidden;

    #multi-left-section,#multi-right-section{
      flex:1;
      @include use-flex;
      @include flex-column;

      &.ctc-section-wrapper{
        height:100%;
        overflow:auto;
        background-color : lighten( $base-gray-color, 35%);

        .ui-sortable-helper{
          box-shadow: 0 5px 25px rgba(0,0,0,.3);
        }

        .ctc-section-placeholder{
          box-sizing: border-box;
          background-color:  lighten( $base-gray-color, 30%);
          box-shadow: 0 0 10px rgba(0,0,0,.3) inset;
          //border : 6px dotted lighten( $base-gray-color, 10%);
        }

        .ctc-section{
          flex:none;
          //border-bottom:2px solid lighten( $base-gray-color, 30%);
          font-size:48px;
          color : lighten( $base-gray-color, 20%);
          background-color:#fff;
          @include use-flex;
          @include flex-align-center;
          box-sizing: border-box;

          @import "zhx.multi.ctc.main";

        }

      }

    }

    #multi-drag-handle{
      width:6px;
      background-color: lighten( $base-gray-color, 20%);
    }

  }

}

.angular-bootstrap-contextmenu{

  &.dropdown-menu{
    padding:0;
    min-width:120px;

    li{

      > div.menu-header{
        padding:4px 8px;
        background-color: lighten( $base-gray-color, 30% );
        text-align:center;
        border-radius:3px 3px 0 0;
        font-weight:600;
        color : #fff;
        font-size: 12px;

        &.upReadyBus,&.downReadyBus{
          background-color : $dark-green-color;
        }

        &.upNonServiceBus,&.downNonServiceBus{
          background-color : $dark-yellow-color;
        }

        &.offLineBus{
          background-color : lighten( $base-color, 30% );
        }

        &.stopServiceBus{
          background-color : $base-red-color;
        }

      }

      &.divider{
        height:1px !important;
        margin:0 !important;
        padding:0 !important;
      }

      a{
        font-size:12px;
        padding:8px 0 3px 10px;
      }
    }

  }
}


.zhx-multi-ctc-layer{
  position:fixed;
  z-index:500;
  background-color:#fff;
  border: 1px solid lighten( $base-gray-color, 20% );
  border-radius:3px;
  overflow:hidden;
  font-size:12px;
  opacity:0;
  box-shadow:0 6px 12px rgba(0,0,0,.175);

  .control-context-menu{
    padding:10px;

    >div{
      @include use-flex;
      @include flex-align-center;
      border-radius:3px 5px;
      padding:5px 8px;
      transform : skew( -15deg );
      font-size:.8em;
      min-width:60px;
      // max-width:170px;

      &.bus-no{
        background-color : #3f51b5;
      }
      &.station-name{
        width:auto;
        background-color : $base-green-color;
      }

      span{
        transform : skew( 15deg );
        color: lighten( $base-gray-color, 100% );
      }
    }

    ul{
      padding:0;margin:0;

      li {
        list-style:none;
        min-width:120px;
        padding:3px 2px;
      }
    }

    ul.buttons {
      margin-top:5px;
      padding-top:5px;
      border-top:1px solid darken( $base-gray-color, 5% );

      li {
        padding:5px 0;
        margin:2px 0;
        background : $base-gray-color;
        border: 1px solid darken( $base-gray-color, 5% );
        border-radius:4px;
        @include use-flex;
        @include flex-align-center;
        cursor:pointer;

        &:hover{
          background-color : darken( $base-gray-color , 4% );
        }

      }
    }
  }
}
